<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <el-container style="padding: 0 30px;">
    <p class="comm-title-withang"><i class="el-icon-caret-right"></i>建筑列表</p>
    <el-row style="margin-top: 20px;">
      <el-table :data="alrmtableData" v-loading.body="alamLoading" style="width: 100%">
        <el-table-column label="建筑">
          <template slot-scope="scope">
            <span>{{scope.row.bName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            <span>{{scope.row.bAddress}}</span>
          </template>
        </el-table-column>
        <el-table-column label="安全责任人">
          <template slot-scope="scope">
            <span>{{scope.row.safeDutyName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="安全责任电话">
          <template slot-scope="scope">
            <span>{{scope.row.safeDutyPhone}}</span>
          </template>
        </el-table-column>
        <el-table-column label="报警设备(个)" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.callCount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="故障设备(个)" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.faultCount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="正常设备(个)" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.normalCount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平面图" width="100" v-if="planSetup==1">
          <template slot-scope="scope">
            <el-button type="text" @click="viewimg(scope.row.id)">查看平面图</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-footer>
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryList.page" :page-sizes="[10,15,30,40]" :page-size="queryList.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-footer>
  </el-container>
</template>
<script>
  import { getAllListData } from "@/api/device/deviceFireMain/index";
  export default {
    props: {
      loadData: {
        required: true,
        default: false
      },
      channelId: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        alrmtableData: [],
        alamLoading: false,
        total: 0,
        queryList: {
          page: 1,
          limit: 15
        },
        planSetup:"0"
      };
    },
    methods: {
      getAllData() {
        this.$store.dispatch("getImgAuth").then(()=>{
          this.planSetup=this.$store.getters.planSetup;
        });
        this.alamLoading = true;
        getAllListData({ ...{ channelId: this.channelId }, ...this.queryList })
          .then(res => {
            this.alrmtableData = res.data.rows;
            this.total = res.data.total;
            this.alamLoading = false;
          })
          .catch(() => {
            this.alamLoading = false;
          });
      },
      handleSizeChange(val) {
        this.queryList.limit = val;
        this.getAllData();
      },
      handleCurrentChange(val) {
        this.queryList.page = val;
        this.getAllData();
      },
      viewimg(id) {
        this.$emit("showSensor", id);
      }
    },
    watch: {
      loadData(val) {
        let self = this;
        if (val) {
          this.$nextTick(() => {
            self.getAllData();
          });
        } else {
          this.alamLoading = false;
          this.$nextTick(() => {
            self.alamLoading = false;
          });
        }
      }
    }
  };
</script>
<style>
  .el-table th {
    background: #f5f7fa;
  }
</style>
